<template>
	<view class="page content-20">
		<view class="title">{{info.title}}</view>
		<view class="title-con">
			{{info.question}}
		</view>
		<view class="wz-img" v-if="info.imgList && info.imgList.length > 0">
			<image class="img" v-for="(item, index) in info.imgList" :key='index' :src="item.imgUrl" mode=""></image>
		</view>
		<view class="desc">{{info.creationTime | formatTime}}</view>
		
		<view class="answer-doctor" v-if="info.answer">
			<image class="avatar" :src="info.avatar | avatar" mode=""></image>
			<view class="answer-info">
				<view class="name">{{info.fullName}}</view>
				<view class="postion">{{info.postTitle}}</view>
			</view>
			<view class="desc">
				{{info.answerTime | formatTime}}
			</view>
		</view>
		<view class="answer-con" v-if="info.answer">
			{{info.answer}}
		</view>
		
		<!-- 医生角色在线回答功能 -->
		<view class="form-wsrap" style="" v-else>
			<view class="form-group__title title">请输入回答</view>
			<view class="form-group form-group__text">
				<textarea class="form-group__from" v-model="answer"  placeholder="请输入解决方法" placeholder-class="placeholder-class" />
			</view>
		</view>
		
		<view class="circular-submit" v-if="!info.answer" @click="formSubmit">提交回答</view>
		
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				info: {},
				id: '',
				answer: '', // 医生回答
			}
		},
		
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		
		methods: {
			getInfo() {
				api.getMyOnlineConsultationDetail({ id: this.id }, res => {
					this.info = res
				})
			},
			
			formSubmit() {
				if(!this.answer) { this.$showToast('请输入问题解决方法'); return false }
				api.saveDoctorAnswer({ id: this.id, answer: this.answer }, res => {
					console.log(res);
					this.$showToast('回答提交成功~')
					setTimeout(() => {
						this.$link('/pagesMine/doctorWzList')
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-wsrap{
		margin-top: 10px;padding-top: 10px; border-top: 1px solid #ddd;
	}
	.content-20{
		padding: 30upx;
	}
	.desc{
		background-image: url(../static/icon_10.png);
		background-size: 20upx 20upx;
		background-repeat: no-repeat;
		background-position: left center;
		padding-left: 35upx;
		margin-top: 20upx;
	}
	.title-con{
		margin: 20upx 0 30upx 0;
	}
	.wz-img{
		@include flex-base;
		justify-content: space-between;
		.img{
			width: 330upx;
			height: 200upx;
			border-radius: 10upx;
		}
	}
	.answer-doctor{
		margin-top: 30upx;
		border-top: 1px solid $border-color;
		padding-top: 30upx;
		@include flex-base;
		margin-bottom: 30upx;
	}
	.avatar{
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
		min-width: 80upx;
		flex-shrink: 0;
	}
	.answer-info{
		flex-grow: 2;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.name{
		font-size: $font-size-30;
		color: #1a1919;
	}
	.postion{
		font-size: $font-size-24;
		color: #666666;
		margin-top: 10upx;
	}
	.answer-con{
		font-size: 28upx;
		color: #333333;
		line-height: 44upx;
		text-align: justify;
	}
</style>
